<template>
   <div class="right">
      <div class="title">
         <span :class="{ titleActive: titleActive === 0 }" @click="titleActive = 0">通知</span>
         <!-- <span :class="{ titleActive: titleActive === 1 }" @click="titleActive = 1">帮助</span> -->
         <span :class="{ titleActive: titleActive === 2 }" @click="titleActive = 2">语音频道</span>
      </div>
      <!-- 社区公告 -->
      <div v-if="titleActive === 0" class="notice">
         <div class="box">
            <ul v-if="SystemData.SystemAnnounceList.length > 0">
               <li v-for="(item, index) in SystemData.SystemAnnounceList" :key="index" @click="clickAnBtn"
                  :class="{ isToday: Utils.isToday(item.createAt) }">
                  <span class="notice-title">{{ item.type === "announcement" ? '公告' : '活动' }}</span>
                  <span class="notice-content">{{ item.title }}</span>
               </li>
            </ul>
            <div v-else class="NoAnnouncement">
               没有公告
            </div>
         </div>
      </div>
      <!-- 社区活动 -->
      <div v-if="titleActive === 1" class="Activity">
         <div class="box">

         </div>
      </div>
      <!-- 语音频道 -->
      <div v-if="titleActive === 2" class="Chat-Channel">
         <div class="box">
            <div class="Chat-Channel-Title-Name-Open">
               <span class="Title">
                  <span class="iconfont icon-biaoqiankuozhan_paihang-123"></span>
                  语音未连接
               </span>
               <span class="iconfont iconfont2 icon-guanbi5"></span>
            </div>
            <div class="Chat-Channel-Content-Member">
               <div class="Chat-Add">
                  社区未开放语音聊天
               </div>
            </div>
         </div>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: {},
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
});


// 点击显示更多分类
const titleActive = ref(0)

// 跳转至公告页面
const clickAnBtn = () => {
   // 携带子系统ID 跳转到公告页面，发请求获取公告列表
   window.open('/Announcement?id=' + props.SystemData.SystemInfo.systemSign, '_blank')
}

</script>
<style lang="scss" scoped>
.right {
   flex: 1;
   background-color: #FFF;
   border-radius: var(--aoir-border-radius) var(--aoir-border-radius);
   box-shadow: var(--aoir-box-shadow);
   padding: 15px;
   display: flex;
   flex-direction: column;

   .title {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      span {
         flex: 1;
         height: 35px;
         display: block;
         margin-left: 15px;
         display: flex;
         justify-content: center;
         align-items: center;
         background: #fff;
         color: #555;
         border-radius: 6px;
         transition: all 0.2s ease-in-out;
         box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.24);


         &:hover {
            cursor: pointer;
         }

         &:active {
            transform: translateY(2px);
         }

         &:nth-child(1) {
            margin-left: 0px;
         }

         &:nth-child(3) {
            background: #82304c;
            color: #FFF;
         }
      }

      .titleActive {
         color: #FFF;
         background-color: var(--aoir-color-primary);
      }
   }

   .box {
      height: 100%;
      // padding: 5px;
   }

   .Activity {
      flex: 1;
   }

   .notice {
      flex: 1;
      width: 100%;
      height: 100%;
      background-color: #FFF;
      border-radius: var(--aoir-border-radius);
      display: flex;
      flex-direction: column;
      box-shadow: 0px 0px 40px 0px rgba(181, 181, 181, 0.25);
      padding: 5px;


      ul {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;

         li {
            padding: 3.5px 8px;
            background-color: #ffffff;
            border-radius: 5px;
            transition: all .2s;
            font-size: 15px;
            display: flex;
            align-items: center;

            .notice-title {
               margin-right: 15px;
               font-size: 13px;
               font-weight: 600;
               background-color: #a5a5a5;
               border-radius: 5px;
               color: #FFF;
               padding: 4px 8px;
            }

            .notice-content {
               overflow: hidden;
               display: -webkit-box;
               -webkit-line-clamp: 1;
               -webkit-box-orient: vertical;
               line-height: 1.4;
               max-height: 1.4em;
               position: relative;
               flex: 1;
               transition: all .2s;
               color: #858585;
            }

            &:hover {
               cursor: pointer;

               .notice-content {
                  transform: translateX(4px);
                  color: #a5a5a5;
               }

               .notice-title {
                  background-color: #009670c4;
               }
            }

            &:active {
               transform: translateX(4px);
            }


         }

         .isToday {
            .notice-content {
               color: #4f4f4f;
            }

            .notice-title {
               background-color: #009670c4;
            }
         }
      }

      .NoAnnouncement {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         // background-color: #FFF;
         // border-radius: var(--aoir-border-radius);
         // display: flex;
         // flex-direction: column;
         // box-shadow: 0px 0px 40px 0px rgba(181, 181, 181, 0.25);

      }
   }

   .Chat-Channel {
      flex: 1;
      background-color: #FFF;
      border-radius: var(--aoir-border-radius);
      display: flex;
      flex-direction: column;
      box-shadow: 0px 0px 40px 0px rgb(181 181 181 / 25%);

      .box {
         padding: 10px;
         display: flex;
         flex-direction: column;
      }

      .Chat-Channel-Title-Name-Open {
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 8px;

         .Title {
            // font-weight: 600;
            font-size: 18px;
            padding: 0px 5px;
            color: #8f8f8f;
            display: flex;
            align-items: center;

            .iconfont {
               font-size: 20px;
               transform: translateY(1px);
               margin: 0 5px 0 0;
               color: #4caf8d;
               text-shadow: 0 0 30px #4caf8d;
            }
         }

         .iconfont2 {
            font-size: 22px;
            margin-right: 5px;
            color: #5e5e5e;
            cursor: pointer;

            &:hover {
               color: #e64355;
            }
         }
      }

      .Chat-Channel-Content-Member {
         flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;

         .Chat-Add {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            border: 1.5px solid rgba(0, 0, 0, 0.14);
            border-radius: var(--aoir-border-radius);
            color: #8b8b8b;
            flex-direction: column;
            background-color: #FFF;
            cursor: pointer;
            box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.45);
            padding: 20px;
         }
      }
   }
}
</style>